<template>
    <div>
        <el-card class="box-card">
            <h2>登录</h2>
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-position="left"
                label-width="100px" class="login-from">
                <el-form-item label="身份证" prop="id">
                    <el-input v-model="ruleForm.id"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password" >
                    <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="身份选择" prop="role">
                    <el-select v-model="ruleForm.role" placeholder="请选择您的身份">
                        <el-option v-for="(role, index) in roles" :key="index" :label="role.name" :value="role.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="验证码" prop="picCode" align="left" >
                    <el-input v-model="ruleForm.picCode"  placeholder="验证码(大小写敏感)"></el-input>
                    <img id="verificationCodeImg" src="http://localhost:8080/kaptcha/create" style="cursor: pointer;" title="点击生成图形验证码" />
                    </br>
                </el-form-item>
            </el-form>
            <div class="btnGroup">
                <el-button type="primary" @click="submitForm('ruleForm')">用户名登录</el-button>
                <el-button type="primary" @click="phonelogin">电话登录</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
                <router-link to="/register">
                    <el-button style="margin-left:10px" @click="register">参赛者注册</el-button>
                </router-link>
            </div>
        </el-card>
    </div>
</template>

<script type="text/javascript">
    $(function () {
            // 刷新验证码
            $("#verificationCodeImg").bind("click", function () {
                $(this).hide().attr('src', 'http://localhost:8080/kaptcha/create?').fadeIn();
            });
        });
       
    export default {
        data() {
            return {
                ruleForm: {
                    id: "",
                    password: "",
                    picCode: "",
                    role:""
                },
                
                rules: {
                    id: [
                        { required: true, message: '请输入用户身份标识', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' }
                    ],
                    role: [
                        { required: true, message: '请选择您的身份', trigger: 'change' }
                    ],
                    picCode:[
                        { required: true, message: '请填写验证码', trigger: 'change' }
                    ]
                },
                roles: [
                    { name: '管理员', value: 'administor' },
                    { name: '参赛者', value: 'contestant' },
                    { name: '教授', value: 'professor' }
                ],
            };
        },
        methods: {
            register(){
                this.$router.push({ path: '/register' });
            },
            refreshPage() {
                window.location.reload();
            },
            submitForm(formName) {
                const that = this;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                       
                        
                        this.$axios({
                            method: 'post',
                            url: "http://localhost:8080/kaptcha/check",
                            data: `picCode=${encodeURIComponent(this.ruleForm.picCode)}`,
                            headers: {
                                'Content-Type': 'application/x-www-form-urlencoded'
                            }
                        }).then(res=>{
                            if(res.data.code == 1){
                                this.$axios({
                                    method: 'post',
                                    url: "http://localhost:8080/login",
                                    data: this.ruleForm,
                                    headers: {
                                        'Content-Type': 'multipart/form-data'
                                    }
                                }).then(res=>{
                                    if (res.data.code == 1) {
                                        localStorage.setItem("token", JSON.stringify(res.data.data));
                                        //window.location.href="http://localhost:8080/login";
                                        // console.log(this);
                                        this.$router.push({ path: '/home' });
                                    } else {
                                        this.$message.error("用户名、密码或者角色错误")
                                        setTimeout(() => {
                                            window.location.reload();
                                        }, 500);
                                        //
                                        
                                    }
                                })
                            }else{
                                
                                this.$message.error(res.data.msg);
                                setTimeout(() => {
                                    window.location.reload();
                                }, 500);
                                
                            }
                        })
                        
                        
                    } else {
                        console.log("error submit!!");
                        return false;
                    }
                });
            },
            resetForm() {
                this.$refs.ruleForm.resetFields();
            },
            phonelogin(){
                this.$router.push({ path: '/loginByPhone' });
            }
        },
        mounted() {
                    this.resetForm();
                },
    };
</script>

<style scoped>
    .box-card {
        margin: auto auto;
        width: 500px;
    }

    .login-from {
        margin: auto auto;
    }
</style>